<template>
  <div style="padding-left: 2rem;padding-right: 2rem;min-height: 900px;">
    <div class="swiper-container" style="margin-top: 20px;">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../../../assets/images/01.jpg" style="width: 100%;height: 100%;">
        </div>
        <div class="swiper-slide">
          <img src="../../../assets/images/02.jpg" style="width: 100%;height: 100%;">
        </div>
        <div class="swiper-slide">
          <img src="../../../assets/images/03.jpg" style="width: 100%;height: 100%;">
        </div>
        <div class="swiper-slide">
          <img src="../../../assets/images/04.jpg" style="width: 100%;height: 100%;">
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-scrollbar"></div>
    </div>
    <div class="container-types clearfix">
      <h3 class="types-title">
        <Icon type="ios-bug" class="icon-style"/>
        <em>小</em>／<em>班</em>／<em>课</em>／<em>推</em>／<em>荐</em>
        <Icon type="ios-bug" class="icon-style"/>
      </h3>
      <Row :gutter="16">
        <i-col span="4" v-for="(item, index) in SmallClassCourse" :key="index" style="padding-right: 15px;padding-left: 15px;">
          <router-link :to="{ name: 'course-detail', query: { id : item.id,  liveType: '2'}}" class="course-card-container">
            <div class="course-card-top">
              <Badge text="NEW">
                <img class="course-banner" :src="item.handcover">
              </Badge>
            </div>
            <div class="course-title">{{ item.courseName }} </div>
            <div>
              <Icon type="md-person" /> {{item.teacherName}}
              <span class="course-price">￥{{item.price}}</span>
            </div>
          </router-link>
        </i-col>
      </Row>
    </div>
    <div class="container-types clearfix">
      <h3 class="types-title">
        <Icon type="ios-bug" class="icon-style"/>
        <em>直</em>／<em>播</em>／<em>推</em>／<em>荐</em>
        <Icon type="ios-bug" class="icon-style"/>
      </h3>
      <Row :gutter="16">
        <i-col span="4" v-for="(item, index) in LiveBroadcastCourse" :key="index" style="padding-right: 15px;padding-left: 15px;">
          <router-link :to="{ name: 'course-detail', query: { id : item.id, liveType: '1'}}" class="course-card-container">
            <div class="course-card-top">
              <Badge text="NEW">
                <img class="course-banner" :src="item.handcover">
              </Badge>
            </div>
            <div class="course-title">{{ item.courseName }} </div>
            <div>
              <Icon type="md-person" /> {{item.teacherName}}
              <span class="course-price">￥{{item.price}}</span>
            </div>
          </router-link>
        </i-col>
      </Row>
    </div>
    <div class="container-types clearfix">
      <h3 class="types-title">
        <Icon type="ios-bug" class="icon-style"/>
        <em>点</em>／<em>播</em>／<em>推</em>／<em>荐</em>
        <Icon type="ios-bug" class="icon-style"/>
      </h3>
      <Row :gutter="16">
        <i-col span="4" v-for="(item, index) in OnDemandCourse" :key="index" style="padding-right: 15px;padding-left: 15px;">
          <router-link :to="{ name: 'course-detail', query: { id : item.id, liveType: '0'}}" class="course-card-container">
            <div class="course-card-top">
              <Badge text="NEW">
                <img class="course-banner" :src="item.handcover">
              </Badge>
            </div>
            <div class="course-title">{{ item.courseName }} </div>
            <div>
              <Icon type="md-person" /> {{item.teacherName}}
              <span class="course-price">￥{{item.price}}</span>
            </div>
          </router-link>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  name: 'index',
  data () {
    return {
      isLogin: true,
      valueHalf: 2.5,
      pageSize: 6,
      pageNumber: 0,
      OnDemandCourse: [],
      LiveBroadcastCourse: [],
      SmallClassCourse: []
    }
  },
  methods: {
    getOnDemandCourse() {
      let url = '/api/api/student/course/page'
      let params = {
        size: this.pageSize,
        number: this.pageNumber,
        courseType: 2
      }
      this.$get(url, params).then((res) => {
        if (res.code === 0) {
          this.OnDemandCourse = res.data
        }
      })
    },
    getLiveBroadcastCourse() {
      let url = '/api/api/student/course/page'
      let params = {
        size: this.pageSize,
        number: this.pageNumber,
        courseType: 1,
        liveType: 1
      }
      this.$get(url, params).then((res) => {
        if (res.code === 0) {
          this.LiveBroadcastCourse = res.data
        }
      })
    },
    getSmallClassCourse() {
      let url = '/api/api/student/course/page'
      let params = {
        size: this.pageSize,
        number: this.pageNumber,
        courseType: 1,
        liveType: 2
      }
      this.$get(url, params).then((res) => {
        if (res.code === 0) {
          this.SmallClassCourse = res.data
        }
      })
    }
  },
  mounted () {
    localStorage.setItem('role', 'student')
    Swiper('.swiper-container', {
      loop: true,
      autoplay: 3000,
      speed: 1000,
      pagination: '.swiper-pagination',
      paginationClickable: true,
      prevButton: '.swiper-button-prev',
      nextButton: '.swiper-button-next'
    })
    this.getOnDemandCourse()
    this.getLiveBroadcastCourse()
    this.getSmallClassCourse()
  }
}
</script>

<style scoped>
  .swiper-container {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 18px;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    width: 100%;
    border-radius: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper-slide img {
    border-radius: 18px;
  }
  .container-types .types-title {
    position: relative;
    font-size: 14px;
    color: #93999F;
    letter-spacing: .6px;
    line-height: 36px;
    text-align: center;
    margin-bottom: 30px;
  }
  .container-types {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 36px 0 48px;
  }
  .container-types .types-title em {
    font-size: 20px;
    font-weight: 600;
    font-style: normal;
    color: #4D555D;
    margin: 0 3px;
  }
  .types-title-more {
    float: right;
  }
  .icon-style {
    color: #ff00ff;
    font-size: 20px;
  }
  .course-banner {
    width: 100%;
    height: 160px;
    background-color: #f3f5f7;
    border-radius: 8px;
  }
  .course-title {
    color: #0f0f0f;
    font-size: 15px;
  }
  .course-price {
    position: absolute;
    color: red;
    right: 10px;
  }
</style>
